import React from 'react';
import Tactic1 from '../tactic1';
import Tactic3 from '../tactic3';
import Tactic2 from '../tactic2';
import styles from './index.less';
import TacticPage from '../tacticPage';
import SettingBox from '../../components/settingBox';

export const PlanPage = ({ strategyList = [], disabled = false }) => {
  const _getTactic = (i, k) => {
    switch (i.strategyType) {
      case 1:
        return <Tactic1 key={k} index={k} strategyData={i} disabled={disabled} />;
      case 2:
        return <Tactic2 key={k} index={k} strategyData={i} disabled={disabled} />;
      case 3:
        return <Tactic3 key={k} index={k} strategyData={i} disabled={disabled} />;
      default:
        return <></>;
    }
  };

  return (
    <div className={styles.page}>
      <div className={styles.head}>
        <SettingBox disabled={disabled} />
      </div>
      <div className={styles.tactic}>
        {strategyList.map((i, k) => _getTactic(i, k))}
        {!disabled && <TacticPage />}
      </div>
    </div>
  );
};
